<template>
  <div class="password-container nav-bar-top">
    <van-nav-bar class="nav-bar" title="修改密码" left-arrow @click-left="$router.back()"/>
    <van-form :show-error-message="false" :show-error="false">
      <div class="circle-bg password-bg">
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请输入旧密码' }]"
        />
        <van-field
          v-model="newPassword"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="新密码"
          :rules="[{ required: true, message: '请输入新密码' }]"
        />
        <van-field
          v-model="confirmPassword"
          type="password"
          name="确认新密码"
          label="确认新密码"
          placeholder="确认新密码"
          :rules="[{ required: true, message: '请再次输入新密码' }]"
        />
      </div>
      <div class="submit">
        <van-button block native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'password',
  data () {
    return {
      password: '',
      newPassword: '',
      confirmPassword: ''
    }
  }
}
</script>

<style lang="scss">
.password-container{
  padding-top: 5px;
  .van-form{
    .password-bg{
      background: #fff;
      .van-cell{
        padding: 10px 0px;
      }
    }
  }
  .submit{
    margin: 16px 10px;
  }
}
</style>
